<template>
    <div>
      <Modal width="1200"  footer-hide v-model="normalReportDetailShow" title="报备详情" >
        <div class="report-content">
          <!--F1 报备详情 -->
          <div class="report-detail">
            <Table border :columns="reportColumns" :data="reportData"></Table>
          </div>
          <div class="report-follow">
            <Table border :columns="followColumns" :data="followData"></Table>
          </div>
        </div>
      </Modal>
      <ChangeStatusModal ref="changeStatusModal" v-bind:reportInfo="reportDetail" />
    </div>
</template>

<script>
import { formatTime } from '@/utils'
import Api from '@/api'
import ChangeStatusModal from './changeStatusModal.vue'

const report = Api.report
export default {
  name: 'normalReportDetailModal',
  components: {
    ChangeStatusModal
  },
  data() {
    return {
      normalReportDetailShow: false,
      reportDetail: {},
      reportData: [],
      reportColumns: [
        { title: '报备Id', key: 'id' },
        { title: '渠道商户', key: 'devCompany' },
        { title: '楼盘名称', key: 'premisesName' },
        { title: '经纪人', key: 'accountName' },
        { title: '经纪人公司', key: 'agentCompany' },
        { title: '客户姓名', key: 'customerName' },
        { title: '客户手机', key: 'mobile' },
        {
          title: '预计到访时间',
          key: 'hopeVisitTime',
          minWidth: 160,
          width: 160,
          render: (h, params) => (
            h('div', {}, formatTime(params.row.hopeVisitTime, 'second'))
          )
        },
        {
          title: '报备推荐人',
          key: 'recommenderName',
          render: (h, params) => (
            h('div', {}, params.row.recommenderName ? params.row.recommenderName : '无')
          )
        },
        { title: '报备状态', key: 'customerStatus' },
        { title: '交易状态', key: 'confirmStatus' },
        {
          title: '报备时间',
          key: 'createTime',
          minWidth: 160,
          width: 160,
          render: (h, params) => (
            h('div', {}, formatTime(params.row.createTime, 'second'))
          )
        },
        {
          title: '操作',
          key: '',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showChangeStatus(params.row);
                  }
                }
              }, '状态变更'),
            ]);
          }
        }
      ],
      followData: [],
      followColumns: [
        { title: '跟进Id', key: 'id' },
        { title: '报备Id', key: 'customerPremisesId' },
        { title: '原报备状态', key: 'oldCustomerStatus' },
        { title: '新报备状态', key: 'newCustomerStatus' },
        { title: '原交易状态', key: 'oldConfirmStatus' },
        { title: '新交易状态', key: 'newConfirmStatus' },
        {
          title: '创建时间',
          key: 'createTime',
          minWidth: 160,
          width: 160,
          render: (h, params) => (
            h('div', {}, formatTime(params.row.createTime, 'second'))
          )
        },
        { title: '备注', key: 'remark' }
      ],
    }
  },
  methods: {
    initData(reportInfo) {
      this.reportData.push(reportInfo);
      this.normalReportDetailShow = true;
      this.getFollowList(reportInfo.id);
    },
    async getFollowList(id) {
      const params = {
        customerPremisesId: id
      }
      const { responseCode, data } = await this.$request(report.listFollow, params)
      if (responseCode === '1') {
        this.followData = data.list
        this.total = data.totalCount
      }
    },
    cleanParams() {
      this.reportData = [];
      this.followData = [];
    },
    showChangeStatus(params) {
      this.reportDetail = params;
      this.$refs.changeStatusModal.cleanParams();
      this.$refs.changeStatusModal.initData(params);
    }
  }
}
</script>

<style scoped>
  .report-detail{margin: 10px 0;}
  .report-follow{margin: 10px 0;}
  .report-content{height: 750px;overflow-y:scroll}
</style>
